<template>
    <div class="mainContext">
        <el-card class="box-card">
            <el-input class="sel_man" v-model="key"  filterable placeholder="搜索学号或名字">

            </el-input>
            <el-button  type="primary" @click="stuSearch" >搜索</el-button>

            <el-button class="add_btn" type="primary" @click="addDialog=true" >添加</el-button>
            <el-table class="table"
                      :data="stuData"
                      stripe
                      height="550"
                      style="width: 100% ;min-height:250px">
                <el-table-column
                        prop="scode"
                        label="学号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="联系方式">
                </el-table-column>
                <el-table-column
                        prop="room.did"
                        label="寝室楼">
                </el-table-column>
                <el-table-column
                        prop="room.rid"
                        label="寝室号">
                </el-table-column>
                <el-table-column
                        prop="bedid"
                        label="床号">
                </el-table-column>

                <el-table-column

                        label="操作">
                    <template #default="scope">
                        <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
                        <el-button  @click="updateRow(JSON.parse(JSON.stringify( scope.row )))" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
                title="添加学生"
                v-model="addDialog"
                width="500px"
                :before-close="handleClose">
            <el-form  :model="stuInfo" class="form" ref="stuInfo" :rules="stuRules"  label-width="110px">
                <el-form-item label="编号" prop="scode">
                    <el-input v-model="stuInfo.scode"  placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="stuInfo.name" placeholder="请输入容纳量"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="tel">
                    <el-input v-model="stuInfo.tel" placeholder="请输入容纳量"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">

                    <el-select class="sel_man" v-model="stuInfo.sex" filterable placeholder="请选择宿舍楼">
                        <el-option

                                label="男"
                                value="男">
                        </el-option>
                        <el-option

                                label="女"
                                value="女">
                        </el-option>
                    </el-select>


                </el-form-item>

                <el-form-item>
                    <el-form-item class="el-col-lg-push-5" >
                        <el-button type="primary" @click="addStu">提交</el-button>
                        <el-button @click="resetForm('stuInfo')">重置</el-button>
                    </el-form-item>



                </el-form-item>

            </el-form>
        </el-dialog>

        <el-dialog
                title="修改学生信息"
                v-model="updateDialog"
                width="500px"
                :before-close="handleClose">
            <el-form  :model="stuInfo" class="form" ref="stuUpdate" :rules="stuRules"  label-width="110px">
                <el-form-item label="编号" prop="scode">
                    <el-input v-model="stuInfo.scode" disabled placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="stuInfo.name" placeholder="请输入容纳量"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="tel">
                    <el-input v-model="stuInfo.tel" placeholder="请输入容纳量"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">

                    <el-select class="sel_man" v-model="stuInfo.sex" filterable placeholder="请选择宿舍楼">
                        <el-option

                                label="男"
                                value="男">
                        </el-option>
                        <el-option

                                label="女"
                                value="女">
                        </el-option>
                    </el-select>


                </el-form-item>
                <el-form-item>
                    <el-form-item class="el-col-lg-push-5" >
                        <el-button type="primary" @click="updateStu">提交</el-button>
                        <el-button @click="resetForm('stuUpdate')">重置</el-button>
                    </el-form-item>



                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import api from "../api";

    export default {
        name: "Room",
        data(){
            return{
                addDialog:false,
                updateDialog:false,
                stuData:[],
                key:'',
                stuInfo:{
                    "scode": "",
                    "name": "",
                    "sex": "",
                    "tel": "",
                    "rid": null,
                    "bedid": null,
                },
                stuRules:{
                    "scode": {required: true, message: '该项不可空', trigger: 'blur'},
                    "name": {required: true, message: '该项不可空', trigger: 'blur'},
                    "sex": {required: true, message: '该项不可空', trigger: 'blur'},
                    "tel": {required: true, message: '该项不可空', trigger: 'blur'},
                    "rid": null,
                    "bedid": null,

                },

            }
        },
        methods:{
            updateStu(){
                this.$refs["stuUpdate"].validate((valid) => {
                    if (valid) {
                        api.post("/student/update",this.stuInfo).then(res=>{
                            if(res.state){
                                this.loadData({});
                                this.$message.success("数据提交成功!")
                                this.updateDialog=false
                                this.cleanData();
                            }else{
                                this.$message.error("数据提交出错!")
                            }
                        }).catch(res=>{
                            this.$message.error("服务器出错了!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addStu(){
                this.$refs["stuInfo"].validate((valid) => {
                    if (valid) {
                        api.post("/student/save",this.stuInfo).then(res=>{
                            if(res.state){
                                this.loadData({});
                                this.$message.success("数据提交成功!")
                                this.addDialog=false
                                this.cleanData();
                            }else{
                                this.$message.error("数据提交出错!")
                            }
                        }).catch(res=>{
                            this.$message.error("服务器出错了!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            stuSearch(){
                api.post("/student/search",{key:this.key}).then(res => {
                    // console.log(res.data.list)
                    if(res.state)
                        this.stuData=res.data;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });

            },
            delRow(Row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post("/student/delete",{scode:Row.scode}).then(res=>{
                        if(res.state){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadData({});
                        }else{
                            this.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    }).catch(res=>{
                        this.$message({
                            type: 'success',
                            message: '服务器出错了!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateRow(Row){
                this.updateDialog=true;
                this.stuInfo =Row;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.cleanData();
                        done();
                    })
                    .catch(_ => {});
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            cleanData(){
                this.stuInfo={
                    "scode": "",
                    "name": "",
                    "sex": "",
                    "tel": "",
                    "rid": null,
                    "bedid": null,
                }
            },
            loadData(args1) {
                api.post("/student/list",args1).then(res => {
                    // console.log(res.data.list)
                    if(res.state)
                        this.stuData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });

            },
        },
        mounted(){
            this.loadData({})
        }
    }
</script>

<style  lang="scss">
    .mainContext {
        margin: 100px auto;
        text-align: center;

        .box-card{
            width: 800px;
            margin: 0px auto;
            border-radius: 10px;
            box-shadow: #ccc 10px 10px 10px;
            .add_btn{
                float: right;
                margin: 0px 50px 20px 10px;
            }
            .el-card{
                border-radius:10px;

                .sel_man{
                    width: 200px;
                    margin-right: 15px;
                }

            }


        }
        .form{
            .sel_man{
                width: 100%;
            }
        }

    }
</style>